<template>
  <div class="login-register">
    <div class="wrap">
      <div class="left">
        <img class="logo" src="~/assets/images/logo1.png" alt="">
        <div class="text">欢迎来到找包装网</div>
        <div class="btns">
          <div class="btn-login" :class="{'active': active === 1}"
               @click="active = 1; $router.push({ path: '/login-register/login' })">
            登录
          </div>
          <div class="btn-register" :class="{'active': active === 2}"
               @click="active = 2; $router.push({ path: '/login-register/register' })">
            注册
          </div>
        </div>
      </div>

      <div class="right">
        <router-view/>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'LoginRegister',
  data() {
    return {
      active: 1
    }
  },
  watch: {
    '$route.name': {
      handler(val) {
        if (val === 'Login') {
          this.active = 1
        } else if (val === 'Register') {
          this.active = 2
        }
      },
      immediate: true
    }
  },
  created() {
    if (this.$store.state.hasLogin) {
      this.$router.push('/home')
    }
  }
}
</script>

<style lang="scss" scoped>
@import "~@/assets/style/common.scss";

.login-register {
  height: calc(100vh - 45px - 55px);
  background: url("~@/assets/images/login-bg.jpg") no-repeat 100% 100%;
  background-size: cover;
  display: flex;
  justify-content: center;
  align-items: center;

  .wrap {
    width: 1200px;
    height: 560px;

    .left, .right {
      width: 50%;
      height: 100%;
    }

    .left {
      background-color: rgba(0, 0, 0, .4);
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      position: relative;

      .logo {
        // width: 100%;
        height: auto;
        margin-bottom: 80px;
      }

      .text {
        font-size: 22px;
        color: $theme-color-1;
      }

      .btns {
        position: absolute;
        top: 0;
        right: 0;
        cursor: pointer;

        .btn-login, .btn-register {
          width: 18px;
          padding: 22px 20px;
          font-size: 18px;
          border: solid 1px $theme-color-1;
          color: $theme-color-1;
          display: flex;
          justify-content: center;
          align-items: center;

          &.active {
            background-color: $theme-color-1;
            color: #fff;
          }

          &.btn-login {
            border-top-left-radius: 10px;
            border-bottom: none;
          }

          &.btn-register {
            border-bottom-left-radius: 10px;
          }
        }
      }
    }

    .right {
      background-color: #fff;
      padding: 15px 20px;
    }
  }
}
</style>
